<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		
			
			table{
				border:1px solider;
				margin: auto;
				width: 500px;
			}
			th,td{
				text-align: center;
				border: 1px solid
			}
			
			div{
				text-align: center;
			}
			
			.out{
				background-color: white;
			}
			.over{
				background-color: palevioletred;
			}
		</style>
		
		<script>
			//页面加载完后添加事件
			window.onload = function(){
				/**
				  * 全选：
				  * 遍历所有的checkbox，设置为checked
				  */
				document.getElementById("selectAll").onclick = function(){
					var cks = document.getElementsByName("ck");
					for(var i = 0;i<cks.length;i++){
						cks[i].checked = true;
					}
				}
				
				//全不选
				document.getElementById("unSelectAll").onclick = function(){
					var cks = document.getElementsByName("ck");
					for(var i = 0;i<cks.length;i++){
						cks[i].checked = false;
					}
				}
				//反选
				document.getElementById("selectRev").onclick = function(){
					var cks = document.getElementsByName("ck");
					for(var i = 0;i<cks.length;i++){
						if(cks[i].checked){
							cks[i].checked = false;
						}else{
							cks[i].checked = true;
						}
					}
				}
				
				//点击最上面的全选或者全不选
				document.getElementById("ck_id").onclick = function(){
					var cks = document.getElementsByName("ck");
					for(var i = 0;i<cks.length;i++){
						cks[i].checked = this.checked;
					}
				}
				
				//鼠标移动
				var trs = document.getElementsByTagName("tr") ;
				for(var i=0;i<trs.length;i++){
					//移动行上
					trs[i].onmouseover = function(){
						this.className = "over"
					}
					//移出行
					trs[i].onmouseout = function(){
						this.className = "out"
					}
				}
			}
			
		</script>
	</head>
	<body>
		
		<table >
		 	<caption>学生信息表</caption>
		 	<tr>
		 		<th> <input type="checkbox" name="ck" id="ck_id"/> </th>
		 		<th>编号</th>
		 		<th>姓名</th>
		 		<th>性别</th>
		 		<th>操作</th>	
		 	</tr>
		 	<tr>
		 		<td> <input type="checkbox" name="ck"/> </td>
		 		<td>1</td>
		 		<td>王小五</td>
		 		<td>男</td>
		 		<td> <a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
		 	</tr>
		 	<tr>
		 		<td> <input type="checkbox" name="ck"/> </td>
		 		<td>2</td>
		 		<td>张小三</td>
		 		<td>男</td>
		 		<td> <a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
		 	</tr>
		 	<tr>
		 		<td> <input type="checkbox" name="ck" /> </td>
		 		<td>3</td>
		 		<td>赵小四</td>
		 		<td>男</td>
		 		<td> <a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
		 	</tr>
		 	<tr>
		 		<td> <input type="checkbox" name="ck"/> </td>
		 		<td>4</td>
		 		<td>李小七</td>
		 		<td>女</td>
		 		<td> <a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
		 	</tr>
		 </table>
		 
		 <div>
		 	<input type="button" id="selectAll" value="全选" />
		 	<input type="button" id="unSelectAll" value="全不选" />
		 	<input type="button" id="selectRev" value="反选" />
		 </div>
		
		
	
	</body>
</html>
